<template>
  <el-table :data="IOTableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="表单编号">
            <span>{{ props.row.formno }}</span>
          </el-form-item>
          <el-form-item label="姓名">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="是否住户">
            <span>{{ props.row.identity }}</span>
          </el-form-item>
          <el-form-item label="体温">
            <span>{{ props.row.temperature }}</span>
          </el-form-item>
          <el-form-item label="健康码">
            <span>{{ props.row.healthcode }}</span>
          </el-form-item>
          <el-form-item label="访问房间号">
            <span>{{ props.row.roomnumber }}</span>
          </el-form-item>
          <el-form-item label="访问楼栋号">
            <span>{{ props.row.corridornumber }}</span>
          </el-form-item>
          <el-form-item label="填写日期">
            <span>{{ props.row.fillingtime }}</span>
          </el-form-item>
          <el-form-item label="进/出">
            <span>{{ props.row.iostatus }}</span>
          </el-form-item>
          <el-form-item label="进出原因">
            <span>{{ props.row.ioreason }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="表单编号" prop="formno"> </el-table-column>
    <el-table-column label="姓名" prop="name"> </el-table-column>
    <el-table-column label="填写日期" prop="fillingtime"> </el-table-column>
    <el-table-column label="进/出" prop="iostatus"> </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      IOTableData: {
        formno: "",
        name: "",
        identity: "",
        temperature: "",
        healthcode: "",
        roomnumber: "",
        corridornumber: "",
        fillingtime: "",
        iostatus: "",
        ioreason: "",
      },
    };
  },
  created() {
    //请求用户个人信息
    this.$axios
      .get("/api/iotable", {
        headers: { Authorization: "Bearer " + this.$store.state.token },
      })
      .then((response) => {
        //console.log(response)
        var pushlist = [];
        this.iotablelist = response.data.iotable;

        this.iotablelist.forEach(function(value, index) {
          console.log(value[0]);
          pushlist.push({
            formno: value[0],
            identity: value[1],
            temperature: value[2],
            healthcode: value[3],
            roomnumber: value[4],
            corridornumber: value[5],
            fillingtime: value[6],
            iostatus: value[7],
            ioreason: value[8],
            name: response.data.name[index],
          });
        });
        this.IOTableData = pushlist;
      });
  },
};
</script>

<style>
/* 列表css */
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.iotable-info {
  padding-left: 10px;
}
/*定义了主体结构标题*/
.iotable-head {
  width: 1000px;
  height: 52px;
  border-bottom: 1px solid rgb(224, 224, 224);
}
/*定义了主体结构标题的文字格式*/
.iotable-head-text {
  width: 160px;
  height: 52px;
  line-height: 29px;
  color: rgba(112, 112, 112, 1);
  font-size: 28px;
  font-family: SourceHanSansSC-bold;
}
/*定义了主体结构副标题*/
.iotable-title {
  width: 1000px;
  height: 50px;
  line-height: 20px;
  padding-left: 15px;
  background-color: rgba(224, 224, 224, 1);
  border: 1px solid rgba(224, 224, 224, 1);
}
/*定义了主体结构副标题的文字格式*/
.iotable-title-text {
  color: rgba(16, 16, 16, 1);
  font-size: 16px;
  font-family: SourceHanSansSC-regular;
}
</style>
